<template>
  <div class="payment-cancelled">
    <el-result
        icon="error"
        title="支付已取消"
        :sub-title="message"
    >
      <template #extra>
        <el-button type="primary" @click="retryPayment">重新尝试支付</el-button>
      </template>
    </el-result>
    <el-alert v-if="error" :title="error" type="error" show-icon></el-alert>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

const route = useRoute();
const store = useStore();

const message = ref('您的支付已被取消。如果这是误操作，您可以重新尝试支付。');
const error = computed(() => store.getters['notifyCancellation/getError']);

const retryPayment = () => {
  const token = route.query.token;
  if (token) {
    window.open(`https://www.sandbox.paypal.com/checkoutnow?token=${token}`);
  } else {
    ElMessage.error('无法重试支付：缺少必要的token');
  }
};

const notifyCancellation = async () => {
  try {
    // await store.dispatch('notifyCancellation/notifyCancellation');
  } catch (err) {
    console.error('Error notifying payment cancellation:', err);
  }
};

onMounted(() => {
  notifyCancellation();
});
</script>

<style scoped>
.payment-cancelled {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.el-alert {
  margin-top: 20px;
}
</style>
